/* 组件依赖引入 */
import { ActionType, PageHeaderWrapper, ProColumns, ProTable } from '@ant-design/pro-components';
import { sortTran, filterTran, filterTranNew } from '@/utils/requestUtil';
import React, { useEffect, useRef, useState } from 'react';
import { Ellipsis } from '@/components/Ellipsis';
import { InputNumber } from 'antd';
import { getProductBomOverviewOfStandProduct } from '@/services/design/standProductBomDesign';

/* Bom设计列表组件 */
const StandProductBomDesign: React.FC<{}> = (props) => {
  /* hook钩子 */
  useEffect(() => {
    console.log('挂载与更新已完成，父组件传入的参数：', props.standTypeId);
    setPropsInfo(props);
    return () => {};
  });
  /* 组件变量 */
  const [propsInfo, setPropsInfo] = useState(); //父组件传入参数

  const actionRef = useRef<ActionType>(); //用于触发刷新操作等，看api
  /* Bom设计列表类型 */
  type standProductBomDesignType = {
    index: string;
    bomCode: string;
  };
  /* Bom列表列属性配置 */
  const column: ProColumns<standProductBomDesignType>[] = [
    {
      title: '序号',
      dataIndex: 'index',
      valueType: 'index',
      width: 80,
      hideInTable: true,
    },
    {
      title: 'BOM编号',
      dataIndex: 'bomCode',
      width: 200,
      align: 'center',
      sorter: true,
      render: (text) => <>{Ellipsis(text)}</>,
      readonly: true,
    },
    // {
    //   title: '版本',
    //   dataIndex: 'version',
    //   align: 'center',
    //   sorter: true,

    //   width: 80,
    //   render: (text) => <>{Ellipsis(text)}</>,
    // },
    {
      title: '物料编号',
      dataIndex: 'materialCode',
      width: 150,
      align: 'center',
      sorter: true,
      render: (text) => <>{Ellipsis(text)}</>,
      readonly: true,
    },
    {
      title: '物料名称',
      dataIndex: 'materialName',
      width: 130,
      align: 'center',
      sorter: true,
      render: (text) => <>{Ellipsis(text)}</>,
      readonly: true,
    },
    {
      title: '物料规格',
      dataIndex: 'materialSpec',
      align: 'center',
      sorter: true,
      render: (text) => <>{Ellipsis(text)}</>,
      readonly: true,
      width: 140,
    },
    {
      title: '数量',
      dataIndex: 'materialQty',
      width: 80,
      align: 'center',
      sorter: true,
      valueType: 'digit',
      render: (text) => <>{Ellipsis(text)}</>,
      editable: (text, record, index) => {
        return true;
      },
      renderFormItem: ({ index }) => {
        return <InputNumber type="number" precision={0} min={0} placeholder="请输入正整数" />;
      },
    },
    {
      title: '单位',
      dataIndex: 'unit',
      width: 80,
      align: 'center',
      sorter: true,
      render: (text) => <>{Ellipsis(text)}</>,
      readonly: true,
    },
    {
      title: '位置号',
      dataIndex: 'positionNo',
      width: 100,
      align: 'center',
      sorter: true,
      render: (text) => <>{Ellipsis(text)}</>,
      readonly: true,
    },
    {
      title: '物料品牌',
      dataIndex: 'brand',
      align: 'center',
      sorter: true,
      render: (text) => <>{Ellipsis(text)}</>,
      readonly: true,
      width: 140,
    },
    {
      title: '物料分类',
      dataIndex: 'materialClassification',
      align: 'center',
      sorter: true,
      render: (text) => <>{Ellipsis(text)}</>,
      readonly: true,
      width: 140,
    },
    {
      title: '物料种类',
      dataIndex: 'materialType',
      align: 'center',
      sorter: true,
      render: (text) => <>{Ellipsis(text)}</>,
      readonly: true,
      width: 140,
    },
    {
      title: '是否甲供料',
      dataIndex: 'isJia',
      width: 100,
      align: 'center',
      sorter: true,
      render: (text) => <>{Ellipsis(text)}</>,
      readonly: true,
    },
  ];
  return (
    <PageHeaderWrapper title={false} breadcrumb={undefined}>
      <ProTable
        headerTitle="BOM清单查询"
        actionRef={actionRef}
        columns={column}
        rowKey="id"
        search={false}
        toolBarRender={(action, { selectedRows }) => []}
        request={async (params, sort, filter) => {
          const sorters = sortTran(sort);
          const filters = filterTranNew(params);
          const pageEntity = {
            current: params.current,
            filters: filters,
            pageSize: params.pageSize,
            sorters: sorters,
          };
          const result = await getProductBomOverviewOfStandProduct({
            pageEntity: pageEntity,
            standTypeId: propsInfo?.standTypeId,
          });
          console.log('查询结果：', result.data.content);
          return {
            data: result.data.content,
            success: result.message,
            total: result.data.totalElements,
          };
        }}
        pagination={{ defaultPageSize: 100 }}
        scroll={{ x: 1600, y: 400 }}
        rowSelection={{}}
        revalidateOnFocus={true}
      />
    </PageHeaderWrapper>
  );
};
export default StandProductBomDesign;
